<!-- 头部全局组件 -->
<template>
  <div class="header">
    <img alt="Vue logo" src="@/assets/images/login-logo.png"/>
    <router-link to="/">首页</router-link>
    <router-link to="/course">课程</router-link>
    <div class="toright">
      <el-autocomplete placeholder="请输入内容"></el-autocomplete>
      <router-link v-if="userData == null" to="/login">我的课堂</router-link>
      <router-link v-else to="/myclass">我的课堂</router-link>
      <router-link to="/login" v-if="userData == null">登录</router-link>
      <div v-else class="model" @mouseenter="enter" @mouseleave="leave">
        <a>{{ userName }}</a>
      </div>
      <div class="popUp" v-show="seen" @mouseenter="enter" @mouseleave="leave">
        <a href="/" @click="exitLogin">退出登录</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userData: "",
      userName: "",
      seen: false,
    };
  },
  mounted() {
    this.userData = JSON.parse(sessionStorage.getItem("userData"));
    if (this.userData != null) {
      this.userName = this.userData.uname;
    }
  },
  methods: {
    enter() {
      this.seen = true;
    },
    leave() {
      this.seen = false;
    },
    exitLogin() {
      sessionStorage.removeItem("userData");
    },
  },
};
</script>
<style lang="less" scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: @width;
  height: @rowheight;
  line-height: @rowheight;
  display: flex;
  padding-right: 15px;
  background-color: #fff;
  & img {
    width: 130px;
    height: 40px;
    margin: 8px 15px 0 15px;
  }
  & a {
    padding: @pd;
    font-size: 16px;
    font-weight: bold;
  }
  & .toright {
    margin-left: auto;

    & a {
      padding-bottom: 22px;
    }
  }
  & .model {
    position: relative;
    display: inline-block;
  }
  & .popUp {
    position: absolute;
    float: right;
    width: 100px;
    height: 50px;
    line-height: 50px;
    top: 30px;
    right: 10px;
  }
}
</style>
